<template>
  <div style="width: 100%; height: 100%">
    <guangbopanelCard>
      <template #article>
        <div style="width: 100%; height: calc(100vh - 185px)">
          <div class="ftpd700">网络接口</div>
          <div class="content">
            <div class="bottom">
              <el-form ref="formRef" :model="state.formData" label-width="70px">
                <el-row :gutter="20">
                  <el-col :span="7" class="cleft">
                    <div class="ft700">业务接口</div>
                    <el-form-item class="mgbtm40" label="mac地址" prop="mac">
                      <el-input
                        v-model="state.formData.mac"
                        placeholder="请输入mac地址"
                      ></el-input>
                    </el-form-item>
                    <el-form-item class="mgbtm40" label="IP地址" prop="ip">
                      <el-input
                        v-model="state.formData.ip"
                        placeholder="请输入IP地址"
                      ></el-input>
                    </el-form-item>
                    <el-form-item class="mgbtm40" label="子网掩码" prop="mask">
                      <el-input
                        v-model="state.formData.mask"
                        placeholder="请输入子网掩码"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7" class="cright">
                    <div class="ft700">管理接口</div>
                    <el-form-item class="mgbtm40" label="mac地址" prop="mac2">
                      <el-input
                        v-model="state.formData.mac2"
                        placeholder="请输入mac地址"
                      ></el-input>
                    </el-form-item>
                    <el-form-item class="mgbtm40" label="IP地址" prop="ip2">
                      <el-input
                        v-model="state.formData.ip2"
                        placeholder="请输入IP地址"
                      ></el-input>
                    </el-form-item>
                    <el-form-item class="mgbtm40" label="子网掩码" prop="mask2">
                      <el-input
                        v-model="state.formData.mask2"
                        placeholder="请输入子网掩码"
                      ></el-input>
                    </el-form-item>
                    <el-form-item
                      class="mgbtm40"
                      label="缺失网关"
                      prop="gateway2"
                    >
                      <el-input
                        v-model="state.formData.gateway2"
                        placeholder="请输入缺失网关"
                      ></el-input>
                    </el-form-item>
                    <el-form-item class="mgbtm40" label="主用DNS" prop="dns">
                      <el-input
                        v-model="state.formData.dns"
                        placeholder="请输入主用DNS"
                      ></el-input>
                    </el-form-item>
                    <el-form-item class="mgbtm40" label="备用DNS" prop="dns2">
                      <el-input
                        v-model="state.formData.dns2"
                        placeholder="请输入备用DNS"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7" class="cright">
                    <div class="ft700">辅助接口</div>
                    <el-form-item class="mgbtm40" label="mac地址" prop="mac3">
                      <el-input
                        v-model="state.formData.mac3"
                        placeholder="请输入mac地址"
                      ></el-input>
                    </el-form-item>
                    <el-form-item class="mgbtm40" label="IP地址" prop="ip3">
                      <el-input
                        v-model="state.formData.ip3"
                        placeholder="请输入IP地址"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="子网掩码" prop="mask3">
                      <el-input
                        v-model="state.formData.mask3"
                        placeholder="请输入子网掩码"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div style="margin-top: 20px">
                <el-button type="primary" @click="submitForm">保存</el-button>
              </div>
            </div>
          </div>
        </div>
      </template>
    </guangbopanelCard>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue-demi";
import axios from "@/utils/request";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
const { proxy } = getCurrentInstance();
let state = reactive({
  selectValue: "",
  formData: {
    hostType: "",
    ip: "",
    refIp: "",
    hostType2: "",
    ip2: "",
    refIp2: "",
  },
  formRules: {
    hostType: [{ required: true, message: "请输入业务节点", trigger: "blur" }],
    ip: [{ required: true, message: "请输入末端节点", trigger: "blur" }],
    refIp: [{ required: true, message: "请输入关联节点", trigger: "blur" }],
    hostType2: [{ required: true, message: "请输入业务节点", trigger: "blur" }],
    ip2: [{ required: true, message: "请输入末端节点", trigger: "blur" }],
    refIp2: [{ required: true, message: "请输入关联节点", trigger: "blur" }],
  },
});
const submitForm = () => {
  let obj = {
    businessNetWork: {}, //业务
    adminNetwork: {}, //管理
    assistNetwork: {}, //网络
  };
  // proxy.$refs.formRef.validate((valid) => {
  //   if (valid) {
  obj.businessNetWork = {
    mac: state.formData.mac,
    ip: state.formData.ip,
    mask: state.formData.mask,
  };
  obj.adminNetwork = {
    mac: state.formData.mac2,
    ip: state.formData.ip2,
    mask: state.formData.mask2,
    gateway: state.formData.gateway2,
    dns: state.formData.dns,
    dns2: state.formData.dns2,
  };
  obj.assistNetwork = {
    mac: state.formData.mac3,
    ip: state.formData.ip3,
    mask: state.formData.mask3,
  };
  console.log(obj);
  axios.post("/sip/serverConfig/editNetwork", obj).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: "保存成功",
        type: "success",
      });
      getList();
    } else {
      ElMessage({
        message: "保存失败",
        type: "error",
      });
    }
  });
  //   }
  // });
};
function getList() {
  axios.get("/sip/serverConfig/queryNetwork").then((res) => {
    if (res.code == 200) {
      state.formData.mac = res.data.businessNetWork.mac;
      state.formData.ip = res.data.businessNetWork.ip;
      state.formData.mask = res.data.businessNetWork.mask;
      state.formData.mac2 = res.data.adminNetwork.mac;
      state.formData.ip2 = res.data.adminNetwork.ip;
      state.formData.mask2 = res.data.adminNetwork.mask;
      state.formData.gateway2 = res.data.adminNetwork.gateway;
      state.formData.dns = res.data.adminNetwork.dns;
      state.formData.dns2 = res.data.adminNetwork.dns2;
      state.formData.mac3 = res.data.assistNetwork.mac;
      state.formData.ip3 = res.data.assistNetwork.ip;
      state.formData.mask3 = res.data.assistNetwork.mask;
    }
  });
}
onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.ft700 {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 15px;
}
.ftpd700 {
  padding: 10px;
  font-weight: 700;
  margin-bottom: 20px;
}
.mgbtm40 {
  margin-bottom: 40px;
}
.selectWidth300 {
  width: 320px;
}
.content {
  margin: 0 0 0 80px;
  .bottom {
    margin-top: 20px;
    .cleft,
    .cright {
      height: 500px;
      border: 1px solid #e2e2e2;
      padding: 10px;
    }
    .cleft {
      margin-left: 10px;
    }
    .cright {
      margin-left: 60px;
    }
  }
}
</style>